<template>
  <!-- 抽屉 -->
  <a-drawer
    title="活动领取详情"
    :width="screenWidth"
    @close="onClose"
    :visible="visible"
  >
    <a-card :bordered="false">
      <detail-list :title="record.activityName">
        <detail-list-item term="红包类型">{{record.activityType==1?'拼手气':'固定金额'}}</detail-list-item>
        <detail-list-item :term="record.activityType==1?'最大金额':'单个金额'">{{record.activityType==1?moneyFormat(record.maxMoney,1):moneyFormat(record.singleMoney,1)}}</detail-list-item>
        <detail-list-item :term="record.activityType==1?'最小金额':'红包个数'">{{record.activityType==1?moneyFormat(record.minMoney,1):record.num}}</detail-list-item>
        <detail-list-item term="使用门槛">{{moneyFormat(record.threshold,1)}}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>

      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchReceiveQuery">
          <a-row :gutter="24" style="width: 1000px;" >
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="编号" >
                <a-input placeholder="请输入领取编号" v-model="queryParam.id"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchReceiveQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReceiveReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="title">领取详情</div>
      <s-table
        ref="table"
        style="margin-bottom: 24px"
        size="default"
        :columns="goodsColumns"
        :data="loadGoodsData">

          <span slot="action" slot-scope="text, record">
          <a-popconfirm :title="record.useStatus==0?'确定标记使用吗?':'确定取消标记吗?'" @confirm="() => updateStatus(record)">
            <a :style="record.useStatus==1?'color:#ff0000':''">{{record.useStatus==1?'取消标记':'标记使用'}}</a>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
  </a-drawer>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import STable from '@/components/table/'
  import DetailList from '@/components/tools/DetailList'
  import { moneyFormat } from '@/utils/util'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import { getAction } from '@/api/manage'
  const DetailListItem = DetailList.Item

  export default {
    name: 'QyMarketingReceiveList',
    components: {
      PageLayout,
      ABadge,
      DetailList,
      DetailListItem,
      STable,
      moneyFormat
    },
    data () {
      return {
        visible: false,
        screenWidth: 800,
        record:{},
        moneyFormat:moneyFormat,
        goodsColumns: [
          {
            title: '用户昵称',
            dataIndex: 'nickName',
            key: 'nickName'
          },
          {
            title: '编号',
            dataIndex: 'id',
            key: 'id'
          },
          {
            title: '领取金额',
            dataIndex: 'money',
            key: 'money',
            customRender:function(text){
              return moneyFormat(text,1)
            }
          },
          {
            title: '领取时间',
            dataIndex: 'createTime',
            key: 'createTime'
          },
          {
            title: '使用情况',
            dataIndex: 'useStatus',
            key: 'useStatus',
            customRender:function(text){
              if(text==1){
                return "已使用";
              }
              return "未使用"
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadGoodsData: parameter => {
          var p = Object.assign(parameter, this.queryParam);
          p.marketingId = this.record.id;
          return this.$http.get('/qy/qyMarketingReceive/list', {
            params: p
          }).then(res => {
            var resultData = res.result;
            var data = {
              data: resultData.records,
              pageSize: resultData.size,
              pageNo: resultData.current,
              totalPage:resultData.pages,
              totalCount: resultData.total
            }
            return data;
          })

        }

      }
    },
    methods: {
      edit(record) {
        this.visible = true;
        this.record = record;
      },onClose(){
        this.visible = false;
      },updateStatus(record){
        this.confirmLoading = true;
        let param ={
          "id":record.id,
          "useStatus":record.useStatus==1?0:1
        }
        getAction("/qy/qyMarketingReceive/updateStatus",param).then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            record.useStatus = param.useStatus;
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },searchReceiveQuery(){
        this.$refs.table.searchTab();
      },searchReceiveReset(){
        this.queryParam ={};
        this.$refs.table.searchTab();
      }
    }
  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>